<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<!-- 导入 css-->
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<!--导入jquery.js-->
		<script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
			
		<!--导入bootstrap.js-->
		<script type="text/javascript" src="js/bootstrap.min.js" ></script>
		<script>
			$(function(){
				$('.carousel').carousel({
				  interval: 1000
				})
			})
		</script>
	</head>
	<body>
		<!--<div class="container">
			<div style="border: 1px solid red;">123</div>
		</div>-->
		<!--<div class="container-fluid">
			<div style="border: 1px solid red;">123</div>
		</div>-->
		<div class="container">
			<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
			  <!-- Indicators -->
			  <!--需要几张图片 就得添加几个 li 还需要在下面的div提供几个 class=item的div-->
			  <ol class="carousel-indicators">
			    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
			    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
			    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
			  </ol>
			
			  <!-- 显示的图片 -->
			  <div class="carousel-inner" role="listbox">
			    <div class="item active">
			      <img src="img/1.jpg" alt="">
			      <div class="carousel-caption">
			       	我是第一张图片
			      </div>
			    </div>
			    <div class="item">
			      <img src="img/2.jpg" alt="...">
			      <div class="carousel-caption">
			        i'am second
			      </div>
			    </div>
			     <div class="item">
			      <img src="img/3.jpg" alt="...">
			      <div class="carousel-caption">
			        third
			      </div>
			    </div>
			  </div>
			
			  <!-- Controls -->
			  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
			    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
			    <span class="sr-only">Previous</span>
			  </a>
			  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
			    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
			    <span class="sr-only">Next</span>
			  </a>
			</div>
		</div>
	</body>
</html>
